<template>
  <div class="container">
    <div class="app-container">
      <el-form
        ref="form"
        label-width="100px"
        size="mini"
        style="margin-left: 150px;"
        :model="formData"
        :rules="rules"
      >
        <el-form-item prop="username" style="margin: 25px;" label="姓名"> <el-input v-model="formData.username" style="width: 300px;" /></el-form-item>
        <el-form-item style="margin: 25px;" label="工号"> <el-input v-model="formData.workNumber" disabled style="width: 300px;" /></el-form-item>
        <el-form-item prop="mobile" style="margin: 25px;" label="手机"> <el-input v-model="formData.mobile" style="width: 300px;" /></el-form-item>
        <el-form-item prop="departmentId" style="margin: 25px;" label="部门">   <!-- 放置及联部门组件 -->
          <select-tree v-model="formData.departmentId" />
        </el-form-item>
        <el-form-item prop="formOfEmployment" style="margin: 25px;" label="聘用形式">
          <el-select v-model="formData.formOfEmployment" style="width: 300px;">
            <el-option label="正式" :value="1" />
            <el-option label="非正式" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item prop="timeOfEntry" style="margin: 25px;" label="入职时间">
          <el-date-picker
            v-model="formData.timeOfEntry"
            style="width: 300px;"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          /></el-form-item>
        <el-form-item prop="correctionTime" style="margin: 25px;" label="转正时间">    <el-date-picker
          v-model="formData.correctionTime"
          style="width: 300px;"
          type="date"
          placeholder="选择日期"
        /></el-form-item>
        <!-- 上传员工头像 -->
        <el-form-item style="margin: 25px;" label="员工头像">
          <upload-image v-model="formData.staffPhoto" /></el-form-item>

        <el-form-item style="margin: 25px;">
          <el-row type="flex" justify="left"><el-button type="primary" size="mini" @click="saveData">保存</el-button></el-row>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import selectTree from '../../components/select-tree.vue'
import { addEmp, getEmpInfo, updateEmpInfo } from '@/api/employee'

import uploadImage from '../../components/upload-image.vue'
export default {
  name: 'Detail',
  components: {
    selectTree,
    uploadImage
  },
  data() {
    return {
      imageUrl: '',
      formData: {
        username: '',
        mobile: '',
        formOfEmployment: null,
        workNumber: '',
        departmentId: null,
        timeOfEntry: '',
        correctionTime: '',
        staffPhoto: ''
      },
      rules: {
        username: [{
          required: true, message: '不能为空', trigger: 'blur'
        },
        {
          min: 1, max: 4, message: '长度1到4位', trigger: 'blur'
        }],
        mobile: [{
          required: true, message: '不能为空', trigger: 'blur'
        },
        {
          pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确',
          trigger: 'blur'
        }],
        formOfEmployment: [{
          required: true, message: '不能为空', trigger: 'blur'
        }],
        departmentId: [{
          required: true, message: '不能为空', trigger: 'blur'
        }],
        timeOfEntry: [{
          required: true, message: '不能为空', trigger: 'blur'
        }],
        correctionTime: [{
          required: true, message: '不能为空', trigger: 'blur'
        },
        {
          validator: (rule, value, callback) => {
            if (this.formData.timeOfEntry) {
              if (new Date(this.formData.timeOfEntry) > new Date(value)) {
                callback(new Error('转正日期不能小于入职日期'))
                return
              }
            }
            callback()
          }
        }
        ]
      }

    }
  },
  created() {
    // if (this.$route.query.id) {
    //   this.getEmpInfo(this.$route.query.id)
    // }
    this.$route.query.id && this.getEmpInfo(this.$route.query.id)
  },
  methods: {
    saveData() {
      this.$refs.form.validate(async(isOk) => {
        let msg = ''
        const id = this.$route.query.id
        // 如果id存在则走修改，否则添加
        if (!id) {
          await addEmp(this.formData)
          msg = '添加'
        } else {
          await updateEmpInfo(id, this.formData)
          msg = '修改'
        }

        this.$refs.form.resetFields()
        this.$message.success(`${msg}成功`)
        this.$router.replace('/employee')
      })
    },
    async getEmpInfo(id) {
      this.formData = await getEmpInfo(id)
    }
  }
}
</script >
<style lang="scss" scoped>
.app-container{
  background:#fff;
  display: flex;
}

</style>
